<template>

    <div class="personHead">
        <div><span>我的项目</span></div>
    </div>
    <div class="personProjectUp">
        <div class="belongStatu">
            <div class="belongStatuContain">
                <span style="font-size:15px; margin-right:15px">项目状态：</span>
                <el-radio-group v-model="searhStatu" @change="searchStatus">
                    <el-radio label="全部" />
                    <el-radio label="立项" />
                    <el-radio label="实施中" />
                    <el-radio label="已结题" />
                </el-radio-group>
                <span style="font-size:15px; margin:0 15px 0 30px">项目类型：</span>
                <el-radio-group v-model="searhType" @change="searchType">
                    <el-radio label="全部" />
                    <el-radio label="公开" />
                    <el-radio label="私人" />
                </el-radio-group>
            </div>
        </div>
        <div class="projectSearch">
            <div class="projectSearchContain">
                <span style="font-size:15px; margin-right:15px">项目名称：</span>
                <el-input placeholder="请输入关键字" style="width:250px;" v-model="projectMap.proName" clearable size="small"/>
                <span style="font-size:15px; margin:0px 15px 0px 15px">项目描述：</span>
                <el-input placeholder="请输入关键字" style="width:250px" v-model="projectMap.description" clearable size="small"/>
                <el-button circle size="mini" id="searchBtn" @click="searchKeyword">
                    <search></search>
                </el-button>
            </div>
        </div>
    </div>

    <div class="personProjectDown">
        <el-table :data="projects" style="width:100%;" :header-cell-style="{background:'#FAFAFA',height:'30px',color:'black'}">
            <el-table-column width="80px" />
            <el-table-column prop="proName" label="项目名称" width="300px"/>
            <el-table-column prop="description" label="项目描述" width="300px" />
            <el-table-column width="80px" />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="createTime" label="创建时间" />
            
            <el-table-column label="类型" >
                <template #default="scope" v-if="true">
                    <div v-if="scope.row.type == '私人'">
                        <svg class="icon4" aria-hidden="true">
                            <use xlink:href="#icon-dian"></use>
                        </svg>
                        <span class="siren">私人</span>
                    </div>
                    <div v-else>
                        <svg class="icon3" aria-hidden="true">
                            <use xlink:href="#icon-dian"></use>
                        </svg>
                        <span class="gongkai">公开</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="status" label="项目状态" />        
            <el-table-column label="操作">
                <template #default>
                    <el-button type="text" size="small" @click="deleteProject" style="color:orangered">删除</el-button>
                    <el-button type="text" size="small" @click="enterProject">进入</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="100" :page-size="10" style="margin:25px 0px 0px 20px"></el-pagination>
    </div>

    <div class="newProjectBtn">
        <el-tooltip effect="dark" content="新建项目" placement="right">
            <el-button type="info" @click="showDrawer" circle size="mini">
                <el-icon class="el-icon"><Plus /></el-icon>
            </el-button>
        </el-tooltip>
    </div>

    <el-drawer v-model="drawer" title="新建项目" direction="rtl" :before-close="handleClose">
        <div class="newProjectContain">
            <el-form :model="project" inline>
                <el-form-item label="项目名称">
                    <el-input v-model="project.proName" style="width:400px" clearable></el-input>
                </el-form-item>
                <el-form-item label="项目描述">
                    <el-input v-model="project.description" type="textarea" rows="3" resize="none" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="项目状态">
                    <el-select v-model="project.status" style="width:185px">
                        <el-option label="立项" value="立项"></el-option>
                        <el-option label="实施中" value="实施中"></el-option>
                        <el-option label="已结题" value="已结题"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item><div style="width:200px"></div></el-form-item>
                <el-form-item label="项目类型">
                    <el-select v-model="project.type" style="width:185px">
                        <el-option label="公开" value="公开"></el-option>
                        <el-option label="私人" value="私人"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item><div style="width:200px"></div></el-form-item>
                <el-form-item label="项目时限">
                    <el-date-picker
                        v-model="project.startTime"
                        type="date"
                        placeholder="开始时间"
                        style="width: 188px"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                    >
                    </el-date-picker>
               </el-form-item>
               <el-form-item>-</el-form-item>
               <el-form-item>
                    <el-date-picker
                        v-model="project.endTime"
                        type="date"
                        placeholder="结束时间"
                        style="width: 188px"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                    >
                    </el-date-picker>
               </el-form-item>
                <el-form-item label="项目地点">
                    <el-input v-model="project.location" type="textarea" rows="3" resize="none" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="委托单位">
                    <el-input v-model="project.client" type="textarea" rows="3" resize="none" style="width:400px"></el-input>
                </el-form-item>

                <div id="pointMapContain">
                </div>

                <el-form-item id="projectLngLat">
                    <el-input v-model="project.lng" style="width:80px" size="medium" placeholder="经度"></el-input>
                    <span>&nbsp;</span>
                    <el-input v-model="project.lat" style="width:80px" size="medium" placeholder="纬度"></el-input>
                </el-form-item>

                <el-input v-model="tipinputs" id="tipinput" style="width:200px" size="medium" placeholder="输入关键字查询"></el-input>

                <el-form-item>
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitNewProject">创 建</el-button>
                </el-form-item>


            </el-form>


        </div>
    </el-drawer>
</template>

<script>
import MapLoader from '@/assets/js/mapLoader'
import { Search,UploadFilled } from '@element-plus/icons-vue'
import { ElMessageBox,ElMessage } from 'element-plus'
export default {
    data(){
        return{
            drawer: false,
            searhStatu: "全部",
            searhType:"全部",
            projectMap:{
                description: "",
                proName: ""
            },
            tipinputs: "",
            project: {
                proid: "",
                status: "立项",
                type: "公开",
                creater: "",
                description: "",
                startTime: '',
                endTime: '',
                location: "",
                client: "",
                createTime: "",
                proName: "",
                lng: '',
                lat: ''
            },
            projects: [{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"私人",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"私人",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"私人",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"公开",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"公开",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"公开",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"公开",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"公开",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },{
                proid: "ahwfiwaohgahg",
                proName:"wfaiwigagowgow",
                status:"立项",
                type:"公开",
                description:"54d8a6wdawdawfwafaw",
                creater:"wdwfawf",
                createTime: "2070-06-03",
                startTime: "2016-05-03",
                endTime:"2017-06-22",
                location:"adwtwraw",
                client:"lfaefgw"
            },
            ]
        }
    },
    components:{
        Search,UploadFilled
    },
    methods:{
        deleteProject(){

        },
        enterProject(){
            this.$router.push({path:'/Project'});
        },
        searchStatus(){
            console.log(this.searhStatu);
        },
        searchTypes(){

        },
        searchKeyword(){

        },
        showDrawer(){
            this.drawer = true;
            this.amapLoader();
        },
        handleClose(done){
            ElMessageBox.confirm('确认取消新建项目?','',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.project = {
                    proid: "",
                    status: "立项",
                    type: "公开",
                    creater: "",
                    description: "",
                    startTime: '',
                    endTime: '',
                    location: "",
                    client: "",
                    createTime: "",
                    proName: "",
                    lng: "",
                    lat: ""
                },
                this.drawer = false;
            })
            .catch(() => {
                // catch error
            })
        },
        submitNewProject(){
            ElMessageBox.confirm('确认新建项目?','',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            })
            .then((e) => {
                //请求
                ElMessage({
                    type: 'success',
                    message: '创建新项目成功',
                    duration: 1000
                })
                this.drawer = false
            })
            .catch((e) => {
                if(e != 'cancel'){
                    ElMessage({
                        type: 'error',
                        message: '创建新项目失败！',
                        duration: 1000
                    })
                }
            })
        },
        //地图加载方法
        amapLoader(){
            MapLoader().then((AMap) => {       
                this.initMap();
                this.tipinput(AMap);
            }, (e) => {
                ElMessage({
                    message: e,
                    type: 'error',
                    duration: 1000
                })
            })
        },
        //地图初始化方法
        initMap(){
            window.pointMap = new AMap.Map('pointMapContain',{
                defaultCursor: 'default',
            });
            
            //获取点击位置的坐标
            pointMap.on('click', (e) => {
                this.project.lng = e.lnglat.getLng().toFixed(2);
                this.project.lat = e.lnglat.getLat().toFixed(2);
            },this);

        },
        //搜索poi,【失效中】
        tipinput(AMap){
            var autoOptions = {
                input: this.tipinputs
            }
            var placeSearch = new AMap.PlaceSearch({
                map: pointMap
            });  //构造地点查询类
            var autoComplete= new AMap.Autocomplete(autoOptions);
            console.log(autoComplete);
            AMap.event.addListener(autoComplete, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
        }
    },

}
</script>

<style>

.personHead{
    height: 60px;
    border-bottom: 1px solid var(--el-border-color-lighter);
}
.personHead div{
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
}
.personProjectUp{
    display: flex;
    flex-direction: column;
    /* padding: 15px 0px 20px 40px; */
    align-items: left;
    height: 150px;
}
.belongStatu{
    margin-left: 60px;
    height: 60px;
    width: 800px;
    border-bottom: 1px dashed #dedede;
}
.belongStatuContain{
    margin-top: 15px;
}
.projectSearch{
    margin-left: 60px;
    height: 70px;
    width: 800px;
    border-bottom: 1px dashed #dedede;
}
.projectSearchContain{
    margin-top: 20px;
    display: flex;
    align-items: center;
}
#searchBtn{
    margin-left: 10px;
}、
.personProjectDown{
    height: 650px;
}
.icon3{
    width: 25px;
    height: 25px;
    fill: yellowgreen;
}
.icon4{
    width: 25px;
    height: 25px;
    fill: orange;
}
.gongkai{
    position: absolute;
    top: 14px;
    left: 30px;
    color: yellowgreen;
}
.siren{
    position: absolute;
    top: 14px;
    left: 30px;
    color: orange;
}
.newProjectBtn{
    position: absolute;
    top: 84px;
    left: 360px;
}
#pointMapContain{
    width: 500px;
    height: 240px;
    margin-bottom: 20px;
}
#projectLngLat{
    position: absolute;
    left: 25px;
    bottom: 275px;
}
#tipinput{
    position: absolute;
    left: 290px;
    bottom: 259px;
}
</style>